<template>
  <div class="web_draw absolute">
    <div class="back">
      <img src="http://diandian.zgkpz.com/images/draw/back.png" />
    </div>
    <div class="round_box">
      <img
        class="img_rotate"
        ref="rotImg"
        src="http://diandian.zgkpz.com/images/draw/zhuanpan.png"
        alt
      />
      <div class="center">
        <div class="pointer" @click="toDraw"></div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "rotaryDraw",
  data() {
    return {
      rotate: 0,
      resetRotate: 0,
      hitId: 1, // 1-10
      drawStatus: false,
      tableHeight: document.body.clientHeight,
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  async mounted() {
    await this.$nextTick();
    let evenTransition = this.whichTransitionEvent();
    let img = this.$refs.rotImg;
    let that = this;
    const hitAre = [
      "5个金币",
      "谢谢参与",
      "1个金币",
      "2个金币",
      "3个金币",
      "4个金币",
    ];
    // 监听 动画结束
    img.addEventListener(evenTransition, tranHand, false);
    function tranHand() {
      // 复位
      that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
      img.style.transition = "none 0s ease 0s";
      img.style.transform = `rotate(${that.resetRotate}deg)`;
      alert(`抽奖结果【 ${hitAre[that.hitId - 1]} 】`);
      that.drawStatus = false;
    }

    // $(".web_draw").css('height',document.body.clientHeight+"px")
  },
  methods: {
    handleResize() {
      if (document.body.clientWidth < 770) {
        this.$router.replace({ path: "/draw" });
      }
    },
    start() {
      this.$refs.rotImg.style.transition = "all 3s ease 0s";
      this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
    },
    toDraw() {
      if (this.drawStatus) {
        console.log("正在抽奖中");
        return;
      }
      // 标记状态
      this.drawStatus = true;
      /**
       * 圆盘共 10 份 每份 36度, 停位置(id)度数 (id - 1)*36
       * 基数 3圈 360*4
       * this.rotate 当前角度
       * **/
      let reset = 360 * 4;
      let idx = this.getRandomInt(1, 6);
      // 设置命中
      this.hitId = idx;
      console.log(this.hitId);
      // 需要多转角度
      let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
      console.log(addRotate);
      // 总共角度
      let allRotate = this.rotate + (idx - 1) * 60 + reset + addRotate;
      console.log(allRotate);
      // 角度限制
      this.rotate = this.setRotate(allRotate);

      this.start();
    },
    // 递归计算角度 不超过 360*6
    setRotate(deg) {
      let rest = deg - 360;
      return rest > 360 * 6 ? this.setRotate(rest) : deg;
    },
    getRandomInt(min, max) {
      // 向上收
      min = Math.ceil(min);
      // 向下收
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    },
    // 动画兼容
    whichTransitionEvent() {
      let el = document.createElement("span"),
        transitions = {
          transition: "transitionend",
          OTransition: "oTransitionEnd",
          MozTransition: "transitionend",
          WebkitTransition: "webkitTransitionEnd",
        };
      for (let t in transitions) {
        if (el.style[t] !== undefined) {
          return transitions[t];
        }
      }
      el = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.back img {
  width: 0.3rem;
  position: absolute;
  top: 0.2rem;
  left: 0.25rem;
}
.img_rotate {
  transform: rotate(0deg);
}
.round_box {
  width: 100%;
  max-width: 2rem;
  position: relative;
  overflow: hidden;
  top: 43.5%;
  left: 49.7%;
  transform: translate(-50%, -50%);
  img {
    width: 100%;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .pointer {
      background: url("http://diandian.zgkpz.com/images/draw/zhizhen.png")
        no-repeat;
      background-size: 100% 100%;
      width: 0.7rem;
      height: 0.85rem;
      position: absolute;
      top: -0.5rem;
      right: -0.36rem;
    }
  }
}
// @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
//   .round_box {
//     max-width: 4rem;
//   }
// }
// .back img {
//   width: 0.7rem;
// }
// .round_box .center .pointer {
//   width: 1.3rem;
//   height: 1.5rem;
//   position: absolute;
//   top: -0.86rem;
//   right: -0.7rem;
// }
// @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
//   .draw {
//     background-image: url(../../assets/images/draw_ipad_bg.png);
//   }
//   .round_box {
//     max-width: 4rem;
//     top: 0.7rem;
//     left: 1.7rem;
//   }
//   .round_box .center .pointer {
//     width: 1.4rem;
//     height: 1.6rem;
//     top: -0.93rem;
//     right: -0.73rem;
//   }
//   .back img {
//     width: 0.5rem;
//     top: 0.3rem;
//     left: 0.4rem;
//   }
// }

// @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
//   .round_box {
//     max-width: 2.6rem;
//     top: 2.5rem;
//     left: 3.8rem;
//   }
//   .round_box .center .pointer {
//     width: 1rem;
//     height: 1.2rem;
//     top: -0.7rem;
//     right: -0.5rem;
//   }
//   .back img {
//     width: 0.6rem;
//     top: 0.3rem;
//     left: 0.3rem;
//   }
// }
</style>
